<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/include.inc.jsp" %>
<!DOCTYPE html>
<html>
<head>
    <%@include file="/WEB-INF/views/layout/miiteen/base.ref.jsp" %>
    <style>
        .file-uploads {
            overflow: hidden;
            position: relative;
            text-align: center;
            display: inline-block;
            background-color: #fbfdff;
            border: 1px dashed #c0ccda;
            border-radius: 6px;
            box-sizing: border-box;
            width: 100px;
            height: 100px;
            line-height: 100px;
        }

        .edit .el-form .el-form-item__content {
            max-width: 220px;
            position: relative;
        }

        .imgbox {
            display: inline-block;
            position: absolute;
            top: 0;
            margin-left: 160px;
            background-color: #fbfdff;
            border: 1px dashed #c0ccda;
            border-radius: 6px;
            box-sizing: border-box;
            width: 100px;
            height: 100px;
            line-height: 100px;
        }

        .imgbox:hover:after {
            position: absolute;
            left: 0;
            top: 0;
            display: block;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            content: attr(data-text);
            transition: all 1s ease;
            transform: translateY(0);
            color: #FFF;
        }

        .imgbox img {
            width: 100%;
            height: 100%;
        }

        .file-uploads:hover, .file-uploads:focus {
            border-color: #409EFF;
            color: #409EFF;
        }

        .item-action {
            position: absolute;
            z-index: 99;
            display: inline-block;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
        }

        .item-action i {
            display: none;

        }

        .imgbox:hover i {
            display: inline-block;
            color: #fff;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translateY(-50%);
        }
    </style>
</head>
<body>
<div class="mainpage edit">
    <!--顶部菜单-->
    <div class="page-topmenu">
        <shiro:hasPermission name="filmInfo:edit">
            <div class="btn-panel">
                <el-button type="primary" size="small" icon="el-icon-check" @click="save">保存</el-button>
            </div>
        </shiro:hasPermission>
        <div class="btn-panel">
            <el-button size="small" icon="el-icon-back" @click="back">返回</el-button>
        </div>
    </div>
    <!--编辑表单-->
    <el-form :ref="formid" :model="form" :rules="rules" size="small" :label-width="labelwidth"
             :label-position="labelposition"
             class="one-col" :validate-on-rule-change="false">

        <!--视业务进行更改-begin-->
        <input type="hidden" v-model="form.id"/>
        <el-form-item label="影视类型" prop="fileTypeName">
            <el-input v-model="form.fileTypeName" placeholder="影视类型" @focus="selectFilmType"></el-input>
        </el-form-item>
        <el-form-item label="标题" prop="title">
            <el-input v-model="form.title" placeholder="标题"></el-input>
        </el-form-item>
        <el-form-item label="图片" prop="image" v-if="form.fileTypeId==2002">
            <file-upload
                    ref="upload"
                    post-action="/uploadfile/upload"
                    extensions="gif,jpg,jpeg,png,webp"
                    accept="image/png,image/gif,image/jpeg,image/webp"
                    :maximum="9"
                    :multiple="true"
                    multiple
                    @input-file="inputFile"
                    @input-filter="inputFilter"
                    :thread="9"
                    input-id="image"
            >
                <i slot="default" class="el-icon-plus" style="font-size: 28px"></i>
            </file-upload>
            <div class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            <div class="imgbox" v-for="(item,index) in dialogImageUrl" :key="index.toString()"
                 :style="{marginLeft: (index+ 1)* 110 + 'px'}"
            >

                <img width="100%" :src="item" alt="" mode="scaleToFill">
                <span class="item-action">
                    <i class="el-icon-zoom-in" style="left: 16%;font-size: 28px" @click="handlePreview(index,item)"></i>
                    <i class="el-icon-delete" style="left: 60%;font-size: 28px" @click="handleRemove(index)"></i>
                </span>
            </div>
            <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="imageUrl" alt="">
            </el-dialog>
        </el-form-item>

        <el-form-item label="视频缩略图" prop="image" v-if="form.fileTypeId==2003">
            <file-upload
                    ref="picture"
                    post-action="/uploadfile/upload"
                    extensions="gif,jpg,jpeg,png,webp"
                    accept="image/png,image/gif,image/jpeg,image/webp"
                    :maximum="1"
                    @input-file="inputFilePicture"
                    @input-filter="inputFilterPicture"
                    :thread="9"
                    input-id="picture"
            >
                <i slot="default" class="el-icon-plus" style="font-size: 28px"></i>
            </file-upload>
            <div class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            <div class="imgbox" v-for="(item,index) in dialogPictureUrl" :key="index.toString()"
                 :style="{marginLeft: (index+ 1)* 110 + 'px'}"
            >

                <img width="100%" :src="item" alt="" mode="scaleToFill">
                <span class="item-action">
                    <i class="el-icon-zoom-in" style="left: 16%;font-size: 28px"
                       @click="handlePreviewPicture(index,item)"></i>
                    <i class="el-icon-delete" style="left: 60%;font-size: 28px" @click="handleRemovePicture(index)"></i>
                </span>
            </div>
            <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="imageUrl" alt="">
            </el-dialog>
        </el-form-item>

        <el-form-item label="视频" prop="video" v-if="form.fileTypeId==2003">
            <file-upload
                    ref="video"
                    post-action="/uploadfile/file"
                    extensions="avi,wma,rmvb,rm,mp4"
                    accept="video/avi,video/wma,video/rmvb,video/rm,video/mp4"
                    :maximum="1"
                    :multiple="true"
                    multiple
                    @input-file="inputFileVideo"
                    @input-filter="inputFilterVideo"
                    :thread="9"
                    input-id="video"
            >
                <i slot="default" class="el-icon-plus" style="font-size: 28px"></i>
            </file-upload>
            <div class="el-upload__tip">只能上传AVI/WMA/RMVB/RM/MP4文件，且不超过500MB</div>
        </el-form-item>


        <el-form-item label="发布时间" prop="publishTime">
            <el-date-picker
                    v-model="form.publishTime"
                    :picker-options="pickerOptions"
                    type="datetime"
                    format="yyyy-MM-dd HH:mm:ss"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    placeholder="请选择选择发布时间">
            </el-date-picker>
        </el-form-item>
        <el-form-item label="内容" prop="content">
            <el-input type="textarea" v-model="form.content" placeholder="内容"></el-input>
        </el-form-item>
        <el-form-item label="作者" prop="author">
            <el-input v-model="form.author" placeholder="作者"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
            <el-input v-model="form.remark" placeholder="备注"></el-input>
        </el-form-item>
        <el-form-item label="是否显示" prop="isDisplay">
            <el-radio-group v-model="form.isDisplay">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="2">否</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="部门" prop="deptName">
            <el-input v-model="form.deptName" placeholder="部门" @focus="selectDept"></el-input>
        </el-form-item>
    </el-form>
</div>
<script>
    //初始化数据，必须放置在列表页面封装部分前
    function initVueOption(obj) {
        //设置控制器
        obj.data.controller = "${ctx}/film/filminfo";
        //设置表单数据
        obj.data.form = ${filmInfo};
        //设置校验规则，没有则删掉
        obj.data.rules = {
            deptName: [{
                required: true,
                message: '请选择部门',
                trigger: 'blur'
            }],
            publishTime: [{
                required: true,
                message: '请选择发布时间',
                trigger: 'blur'
            }],
            fileTypeName:[{
                required:true,
                message:'请选择类型',
                trigger:'blur'
            }]
        }

        //默认选项
        if (obj.data.form.isDisplay == 0) {
            obj.data.form.isDisplay = 1;
        }
        if (obj.data.form.fileTypeId == 0) {
            obj.data.form.fileTypeName = "";
        }

        //时间限制
        obj.data.pickerOptions = {
            disabledDate : function(time){
                return time.getTime() <= Date.now() - 8.64e7;
            }
        }

        //选择影视类型
        obj.methods.selectFilmType = function () {
            miiteen.customsearch.open("sysFilmType", function (result) {
                var param = result[0];
                Page.form.fileTypeId = param.result1;
                Page.form.fileTypeName = param.result2;
            }, {
                title: "影视类型选择",
                type: "tree",
                multiple: false
            })
        }

        //选择导航
        obj.methods.selectNavigation = function () {
            miiteen.customsearch.open("sysNavigation", function (result) {
                var param = result[0];
                Page.form.basicNavigationId = param.result1;
                Page.form.basicNavigationName = param.result2;
            }), {
                title: "父级导航",
                type: "tree",
                multiple: false
            }
        }

        //选择部门
        obj.methods.selectDept = function () {
            miiteen.customsearch.open("sysDepartment", function (result) {
                var param = result[0];
                Page.form.deptId = param.result1;
                Page.form.deptName = param.result2;

            }, {
                title: "部门选择",
                type: "tree",
                multiple: false,
                con: {deptIds: "${deptIds}"}
            })
        }

        //上传图片=====================begin===============================
        obj.data.dialogVisible = false;
        obj.data.dialogImageUrl = [];
        obj.data.imageUrl = '';
        //图片回显
        if (obj.data.form.fileResourceList.length > 0) {
            for (var i = 0; i < obj.data.form.fileResourceList.length; ++i) {
                obj.data.dialogImageUrl.push(obj.data.form.fileResourceList[i].image);
            }
        }
        //删除图片
        obj.methods.handleRemove = function (i) {
            obj.data.dialogImageUrl.splice(i, 1)
            obj.data.form.fileResourceList.splice(i, 1);
        }
        //显示（放大）
        obj.methods.handlePreview = function (i, file) {
            obj.data.imageUrl = file;
            obj.data.dialogVisible = true;
        }

        obj.methods.inputFile = function (newFile, oldFile) {
            // 自动上传
            if (Boolean(newFile) !== Boolean(oldFile) || oldFile.error !== newFile.error) {
                if (!this.$refs.upload.active) {
                    this.$refs.upload.active = true
                }
            }
            //上传成功
            if (newFile && oldFile && !newFile.active && oldFile.active) {
                var userAgent = navigator.userAgent;
                var resData = null;
                if (userAgent.indexOf("MSIE 9.0") > -1) { //判断是否是ie 9浏览器
                    resData = newFile.response
                } else {
                    resData = JSON.parse(newFile.response);                }
                if (resData.state == 1) {

                    obj.data.dialogImageUrl.push(resData.data);
                    var image = {id: 0, dataId: 0, image: resData.data, delState: 0};
                    Page.form.fileResourceList.push(image);
                    if (obj.data.dialogImageUrl.length > 8) {
                        this.$refs.upload.active = false;
                        this.$message.error('只能上传9张!');
                    }
                }
            }
        },
            //上传之前
            obj.methods.inputFilter = function (newFile, oldFile, prevent) {
                if (newFile && !oldFile) {
                    // 过滤不是图片后缀的文件
                    if (!/\.(jpeg|jpe|jpg|gif|png|webp)$/i.test(newFile.name)) {
                        this.$message.error('只能上传jpg/png文件，且不超过500kb,请重新上传');
                        return prevent()
                    }
                }
            }
        //上传图片=====================end=================================


        //上传缩略图=====================begin===============================
        //兰州影视
        obj.data.dialogPictureUrl=[]
        obj.data.dialogVideoUrl = {id: 0, fileId: 0, newsInfoId: 0, image: "", video: "", delState: 0};

        //图片回显
        if (obj.data.form.fileResourceList.length > 0) {
            for (var i = 0; i < obj.data.form.fileResourceList.length; ++i) {
                obj.data.dialogPictureUrl.push(obj.data.form.fileResourceList[i].image);
            }
        }

        //删除图片
        obj.methods.handleRemovePicture = function (i) {
            obj.data.dialogPictureUrl.splice(i, 1)
            obj.data.form.fileResourceList.splice(i, 1);
        }
        //显示（放大）
        obj.methods.handlePreviewPicture = function (i, file) {
            obj.data.imageUrl = file;
            obj.data.dialogVisible = true;
        }

        obj.methods.inputFilePicture = function (newFile, oldFile) {
            // 自动上传
            if (Boolean(newFile) !== Boolean(oldFile) || oldFile.error !== newFile.error) {
                if (!this.$refs.picture.active) {
                    this.$refs.picture.active = true
                }
            }
            //上传成功
            if (newFile && oldFile && !newFile.active && oldFile.active) {
                var userAgent = navigator.userAgent;
                var resData = null;
                if (userAgent.indexOf("MSIE 9.0") > -1) { //判断是否是ie 9浏览器
                    resData = newFile.response
                } else {
                    resData = JSON.parse(newFile.response);
                }
                if (resData.state == 1) {
                    obj.data.dialogPictureUrl.push(resData.data);
                    obj.data.dialogVideoUrl.image=resData.data;
                    if (obj.data.dialogPictureUrl.length > 1) {
                        obj.data.dialogPictureUrl = obj.data.dialogPictureUrl.slice(0, 1);
                        this.$refs.picture.active = false;
                        this.$message.error('缩略图只能上传1张!');
                    }
                    if(obj.data.dialogVideoUrl.video!=""){
                        Page.form.fileResourceList.push(obj.data.dialogVideoUrl);
                    }

                }
            }
        },
            //上传之前
            obj.methods.inputFilterPicture = function (newFile, oldFile, prevent) {
                obj.data.dialogVideoUrl.image="";
                if (newFile && !oldFile) {
                    // 过滤不是图片后缀的文件
                    if (!/\.(jpeg|jpe|jpg|gif|png|webp)$/i.test(newFile.name)) {
                        this.$message.error('只能上传jpg/png文件，且不超过500kb,请重新上传');
                        return prevent()
                    }
                }
            }
        //上传缩略图=====================end=================================



        //上传视频=====================begin===============================
        var isUpload=false;
        var index=1;
        //上传
        obj.methods.inputFileVideo = function (newFile, oldFile) {
            if(isUpload&&index==1) {
                window.parent.mtMsg.confirm("视频已上传，确定要替换吗?", function () {

                }, function () {

                    this.$refs.video.active = false;
                })
                index++;
            }

            // 自动上传
            if (Boolean(newFile) !== Boolean(oldFile) || oldFile.error !== newFile.error) {
                if (!this.$refs.video.active) {
                    this.$refs.video.active = true
                }
            }
            //上传成功
            if (newFile && oldFile && !newFile.active && oldFile.active) {
                var userAgent = navigator.userAgent;
                var resData = null;
                if (userAgent.indexOf("MSIE 9.0") > -1) { //判断是否是ie 9浏览器
                    resData = newFile.response
                } else {
                    resData = JSON.parse(newFile.response);
                }
                if (resData.state == 1) {
                    obj.data.dialogVideoUrl.video = resData.data;
                    isUpload=true;
                    index=1;
                    this.$message.success("视频上传成功！")
                    if(obj.data.dialogVideoUrl.image!=""){
                        Page.form.fileResourceList.push(obj.data.dialogVideoUrl);
                    }
                }
            }
        },
            //上传之前
            obj.methods.inputFilterVideo = function (newFile, oldFile, prevent) {


                obj.data.dialogVideoUrl.video ="";
                if (newFile && !oldFile) {
                    // 过滤不是图片后缀的文件
                    if (!/\.(mp4|rmvb|avi|wmv)$/i.test(newFile.name)) {
                        this.$message.error('只能上传mp4/rmvb/avi/wmv文件，且不超过500Mb');
                        return prevent()
                    }
                }
            }
        //上传图片=====================end=================================
    }
</script>
<!--编辑页面封装部分-->
<%@include file="/WEB-INF/views/layout/miiteen/page.edit.ref.jsp" %>
</body>
</html>
